<template>
    <div class="list">
        <div class="item" v-for="(item,index) in joks" :key="index">
            <h3>{{item.title}}</h3>
            <p>{{item.summary}}</p>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            joks:[],
            page:1,
            flag:true,
        }
    },
    created(){
        this.getJok();
    },
    methods:{
        getJok(){
            this.flag=false;
            this.$request.get("http://520mg.com/mi/list.php?page="+this.page)
            .then(res=>{
                this.joks=this.joks.concat(res.data.result)
                this.flag=true;
                this.page++;
                this.$nextTick(()=>{
                    this.waterFall();
                })
            })
        },
        waterFall(){
            var column=2;
            var gap =10;
            var colWidth = (window.innerWidth-(column+1)*gap)/column;
            var arr=[];
            arr.length=column;
            arr.fill(0);
            var items=document.querySelectorAll(".item");
            for(var i=0;i<items.length;i++){
                items[i].style.position="absolute";
                items[i].style.width=colWidth+"px";
                var min =Math.min(...arr);
                var minIndex =arr.indexOf(min);
                items[i].style.left=minIndex*gap+gap+colWidth*minIndex+"px";
                items[i].style.top=arr[minIndex]+gap+"px";
                var h=items[i].offsetHeight;
                arr[minIndex]=arr[minIndex]+h+gap;
            }
        }
    }
}
</script>
